<template>
  <div class="leftNav">
    <div class="logo">
      <img src="@/assets/logo.png" alt />
    </div>
    <el-menu
      style="width: 256px"
      unique-opened
      :default-active="$route.path"
      router
      class="el-menu-vertical-demo"
      background-color="#001529"
      text-color="#fff"
    >
      <div v-for="(item1, index) in navConfig" :key="index">
        <div v-if="item1.childrenList">
          <el-submenu :index="'' + index">
            <template slot="title">
              <img
                :src="item1.icon"
                alt
                style="width: 14px; height: 14px; margin-right: 12px"
              />
              <span>{{ item1.title }}</span>
            </template>
            <div v-if="item1.childrenList">
              <div v-for="(item2, idx) in item1.childrenList" :key="idx">
                <div v-if="item2.childrenList">
                  <el-submenu
                    :index="'' + index + '-' + idx"
                    class="my-el-submenu"
                  >
                    <template slot="title">{{ item2.routerName }}</template>
                    <div v-if="item2.childrenList">
                      <el-menu-item
                        @click.native="refreshRouter"
                        v-for="(item3, i) in item2.childrenList"
                        :key="i"
                        :index="item3.router"
                        ><span style="padding-left: 10px">{{
                          item3.routerName
                        }}</span></el-menu-item
                      >
                    </div>
                  </el-submenu>
                </div>
                <div v-else>
                  <el-menu-item
                    :index="item2.router"
                    @click.native="refreshRouter"
                    >{{ item2.routerName }}</el-menu-item
                  >
                </div>
              </div>
            </div>
          </el-submenu>
        </div>
        <div v-else>
          <el-menu-item :index="item1.router" @click.native="refreshRouter">
            <img
              :src="item1.icon"
              alt
              style="width: 14px; height: 14px; margin-right: 12px"
            />{{ item1.title }}</el-menu-item
          >
        </div>
      </div>
    </el-menu>
  </div>
</template>

<script>
import navConfig from "./navConfig";
export default {
  inject: ["reload"],
  data() {
    return {
      navConfig: navConfig,
      menu: "",
      routerChange: false,
    };
  },
  watch: {
    "$route.path"(newRouter, oldRouter) {
      this.routerChange = true;
      setTimeout(() => {
        this.routerChange = false;
      }, 500);
    },
  },
  methods: {
    // 刷新当前路由
    refreshRouter() {
      if (!this.routerChange) {
        this.reload();
      }
    },
  },
};
</script>

<style lang="less" scoped>
.leftNav {
  width: 257px;
  overflow-x: hidden;
  background-color: #001529;
  &::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 10px;
    /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;
  }

  &::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 10px;
    background-color: skyblue;
    background-image: -webkit-linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.2) 25%,
      transparent 25%,
      transparent 50%,
      rgba(255, 255, 255, 0.2) 50%,
      rgba(255, 255, 255, 0.2) 75%,
      transparent 75%,
      transparent
    );
  }

  &::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #ededed;
    border-radius: 10px;
  }
  .logo {
    height: 64px;
    background-color: #002140;
    display: flex;
    justify-content: center;
    align-items: center;
    img {
      width: 85%;
    }
  }
}
</style>